Create a Responsive Popup Contact Form: HTML, CSS, JavaScript Tutorial

Faraz

By Faraz -

Learn how to create a responsive popup contact form using HTML, CSS, and JavaScript to enhance user interaction and improve user experience on your website.

Join us on Telegram
Create a Responsive Popup Contact Form HTML, CSS, JavaScript Tutorial.webp
Read Alsocreating a responsive timeline with tailwind css.jpgCreating a Responsive Timeline with Tailwind CSS

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. JavaScript Code
  5. Conclusion
  6. Preview

A popup contact form is a valuable addition to any website, allowing users to quickly and conveniently reach out to you without navigating away from the current page. In this tutorial, we'll walk through the process of creating a responsive popup contact form using HTML, CSS, and JavaScript.

Source Code

Step 1 (HTML Code):

To begin, create the HTML structure for your popup contact form. Start with a basic HTML template and add elements such as form fields for name, email, message, and a submit button. Ensure proper markup and accessibility features are included.

Here's a breakdown of what each part does:

1. <!DOCTYPE html>: Declares the document type and version of HTML being used.

2. <html lang="en">: Defines the root element of the HTML document and specifies the language as English.

3. <head>: Contains meta-information about the HTML document such as character encoding, viewport settings, and title.

  • <meta charset="UTF-8" />: Specifies the character encoding of the document to UTF-8.
  • <meta http-equiv="X-UA-Compatible" content="IE=edge" />: Provides instructions to the browser on how to render the webpage, particularly for Internet Explorer.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0" />: Sets the viewport properties for responsive web design, ensuring the webpage adapts well to various devices and screen sizes.
  • <title>Responsive Popup Contact Form</title>: Sets the title of the webpage shown in the browser's title bar or tab.
  • <link rel="stylesheet" href="styles.css" />: Links an external CSS file named "styles.css" to apply styles to the HTML document.

4. <body>: Contains the content of the webpage that users see and interact with.

  • <div class="contact-container">: Wraps the content related to the contact form. It includes a heading and a button labeled "Contact Us".
  • <div class="cd-popup contact" role="alert">: This is a popup container for the contact form. It includes a form with input fields for name, email, message, and a checkbox to confirm human interaction.
  • <div class="cd-popup notification" role="alert">: This is another popup container, this time for displaying a notification message after submitting the contact form.
  • <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>: Loads the jQuery library from a Content Delivery Network (CDN). jQuery is a JavaScript library that simplifies HTML document traversing, event handling, animating, and Ajax interactions.
  • <script src="script.js"></script>: Links an external JavaScript file named "script.js" which contains scripts to handle interactions with the contact form.
Read Alsosearchtable.pngHow to Create a Filter/Search HTML Table with Few Lines of JQuery?

Step 2 (CSS Code):

Next, style your contact form using CSS to ensure it matches the design of your website and looks visually appealing. Apply responsive design principles to make the form adapt to different screen sizes and devices seamlessly.

Let's break it down section by section:

1. Font Import:

  • Three external font families are imported: Lato (with weights 300 and 700), Roboto (with weights 400 and 700), and Font Awesome for icons.

2. Body Styling:

  • Sets the background color for the body.
  • Defines font properties for body text, inputs, selects, and textareas.
  • Removes default styling for borders and outlines on input elements.
  • Defines styling for headings (h2 and h3) and unordered lists (ul).

3. Checkbox Styling:

  • Customizes the appearance of checkboxes using pseudo-elements like ::before.
  • Defines styles for checkbox labels, including hover and focus states.

4. Button Styling:

  • Defines styles for various types of buttons (submit, reset, button, .button).
  • Includes hover and active states, as well as styles for buttons with icons.

5. Popup Styling:

  • Defines styles for a popup/modal window.
  • Sets its position, background color, transition effects, and close button styling.

6. Contact Form Styling:

  • Styles a contact form, including input fields for name, email, message, and a submit button.
  • Specifies responsive styles for different screen sizes, adjusting widths and borders accordingly.
  • Defines styles for input labels, including focus and typing states.

7. Media Queries:

  • Includes media queries to make the layout responsive, adjusting styles based on the device's screen size.
@import url("https://fonts.googleapis.com/css?family=Lato:300,700");
@import url("https://fonts.googleapis.com/css?family=Roboto:400,700");
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css");

/* Body */

body {
  background: rgb(224, 223, 223) !important;
}

body,
input,
select,
textarea {
  background: none;
  color: #646464;
  font-family: "Lato", Helvetica, sans-serif;
  font-size: 15pt;
  font-weight: 300;
  line-height: 1.75em;
}

input,
textarea {
  border: none !important;
  outline: none !important;
  resize: none !important;
  width: 100% !important;
  -moz-appearance: none !important;
  -webkit-appearance: none !important;
  -o-appearance: none;
  -ms-appearance: none;
  appearance: none;
}

h2,
h3 {
  color: #545454;
  font-weight: 700;
  line-height: 1.5em;
  margin: 0 0 1em 0;
  letter-spacing: -0.01em;
}

h2 {
  font-size: 1.75em;
}

h3 {
  font-size: 1.25em;
}

ul {
  list-style: disc;
  margin: 0 0 2em 0;
  padding-left: 1em;
}

ul.actions {
  cursor: default;
  list-style: none;
  padding-left: 0;
}

ul.actions li {
  display: inline-block;
  padding: 0 1em 0 0;
  vertical-align: middle;
}

ul.actions li:last-child {
  padding-right: 0;
}

.contact-container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}


/* Checkbox */

input[type="checkbox"] {
  -moz-appearance: none;
  -webkit-appearance: none;
  -o-appearance: none;
  -ms-appearance: none;
  appearance: none;
  display: block;
  float: left;
  margin-right: -2em;
  opacity: 0;
  width: 1em;
  z-index: -1;
}

input[type="checkbox"] + label {
  text-decoration: none;
  color: #646464;
  cursor: pointer;
  display: inline-block;
  font-size: 1em;
  font-weight: 300;
  padding-left: 2.4em;
  padding-right: 0.75em;
  position: relative;
}

input[type="checkbox"] + label:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-transform: none !important;
}

input[type="checkbox"] + label:before {
  background: rgba(144, 144, 144, 0.075);
  border-radius: 0.5em;
  border: solid 1px rgba(144, 144, 144, 0.25);
  content: '';
  display: inline-block;
  height: 1.65em;
  left: 0;
  line-height: 1.58125em;
  position: absolute;
  text-align: center;
  top: 0;
  width: 1.65em;
}

input[type="checkbox"]:checked + label:before {
  background: #494d53;
  border-color: #494d53;
  color: #ffffff;
  content: '\f00c';
}

input[type="checkbox"]:focus + label:before {
  border-color: #47cdd9;
  box-shadow: 0 0 0 1px #47cdd9;
}

input[type="checkbox"] + label:before {
  border-radius: 0.5em;
}


/* Buttons */

input[type="submit"],
input[type="reset"],
input[type="button"],
.button {
  -moz-appearance: none;
  -webkit-appearance: none;
  -o-appearance: none;
  -ms-appearance: none;
  appearance: none;
  -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  -o-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  background-color: transparent;
  border-radius: 0.5em;
  border: solid 1px rgba(144, 144, 144, 0.25) !important;
  color: #545454 !important;
  cursor: pointer;
  display: inline-block;
  font-size: 0.8em;
  font-weight: 700;
  height: 3.5em;
  letter-spacing: 0.1em;
  line-height: 3.5em;
  overflow: hidden;
  padding: 0 2em;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:hover {
  background-color: rgba(144, 144, 144, 0.075);
  color: #545454 !important;
}

input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active,
.button:active {
  background-color: rgba(144, 144, 144, 0.2);
}

input[type="submit"].icon,
input[type="reset"].icon,
input[type="button"].icon,
.button.icon {
  padding-left: 1.35em;
}

input[type="submit"].icon:before,
input[type="reset"].icon:before,
input[type="button"].icon:before,
.button.icon:before {
  margin-right: 0.5em;
}

#submit {
  background: #47cdd9;
  color: #fff !important;
  border-color: #fff !important
}


/* Popup */

.cd-popup {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(94, 110, 141, 0.9);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
  transition: opacity 0.3s 0s, visibility 0s 0.3s;
  overflow-y: auto;
  z-index: 10000;
}

.cd-popup.is-visible {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0s;
  transition: opacity 0.3s 0s, visibility 0s 0s;
}

.cd-popup-container {
  overflow-x: hidden;
  border: none;
  position: relative;
  width: 82% !important;
  max-width: 82% !important;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  background: #fff;
  border-radius: .25em .25em .4em .4em;
  box-shadow: none;
  -webkit-transform: translateY(-40px);
  -moz-transform: translateY(-40px);
  -ms-transform: translateY(-40px);
  -o-transform: translateY(-40px);
  transform: translateY(-40px);
  /* Force Hardware Acceleration in WebKit */
  -webkit-backface-visibility: hidden;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

.cd-popup-container p {
  margin: 0;
  padding: 3em 1em;
  padding-top: 1em;
}

.cd-popup-container .cd-popup-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
}

.cd-close-button {
  color: #545454;
  border-bottom: none;
}

.cd-popup-container .cd-popup-close::before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  left: 8px;
}

.cd-popup-container .cd-popup-close::after {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  right: 8px;
}

.is-visible .cd-popup-container {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}

@media only screen and (min-width: 1170px) {
  .cd-popup-container {
    margin: 2em auto;
  }
}


/* Contact Form */

label:hover {
  cursor: text !important;
}

.contact-form {
  background: #ffffff !important;
  height: auto;
  margin: 100px auto;
  max-width: 82%;
  overflow: hidden !important;
  width: 100%;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: rgba(26, 26, 26, 0.1) 0 1px 3px 0;
  -webkit-box-shadow: rgba(26, 26, 26, 0.1) 0 1px 3px 0;
  box-shadow: rgba(26, 26, 26, 0.1) 0 1px 3px 0;
}

@media (max-width: 500px) {
  .contact-form {
    margin: 0;
    padding-top: 1em;
    width: 100% !important;
    max-width: 100% !important;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    -moz-box-shadow: rgba(26, 26, 26, 0.1) 0 0px 0px 0;
    -webkit-box-shadow: rgba(26, 26, 26, 0.1) 0 0px 0px 0;
    box-shadow: rgba(26, 26, 26, 0.1) 0 0px 0px 0;
  }
}

.contact-form .email,
.contact-form .message,
.contact-form .name {
  overflow-x: hidden;
  position: relative !important;
  -moz-border-radius: none !important;
  -webkit-border-radius: none !important;
  border-radius: none !important;
}

.contact-form .email input:focus,
.contact-form .email textarea:focus,
.contact-form .message input:focus,
.contact-form .message textarea:focus,
.contact-form .name input:focus,
.contact-form .name textarea:focus {
  background: #f4f5f6 !important;
}

.contact-form .email label,
.contact-form .message label,
.contact-form .name label {
  color: #cbd0d3 !important;
  left: 23px !important;
  position: absolute !important;
  top: 23px !important;
  -moz-transition: all, 150ms !important;
  -o-transition: all, 150ms !important;
  -webkit-transition: all, 150ms !important;
  transition: all, 150ms !important;
}

.contact-form .email.typing label,
.contact-form .message.typing label,
.contact-form .name.typing label {
  color: #3498db !important;
  font-size: 10px !important;
  top: 7px !important;
}

.contact-form .email,
.contact-form .name {
  width: calc(50% - 1px) !important;
}

@media (max-width: 500px) {
  .contact-form .email,
  .contact-form .name {
    width: 100% !important;
  }
}

.contact-form .email input,
.contact-form .name input {
  padding: 23px 0 8px 23px !important;
}

.contact-form .email {
  border-left: 1px #e6e6e6 solid !important;
  float: right !important;
}

@media (max-width: 500px) {
  .contact-form .email {
    border-left: none !important;
    border-top: 1px #e6e6e6 solid !important;
  }
}

.contact-form .message {
  border-bottom: 1px #e6e6e6 solid !important;
  border-top: 1px #e6e6e6 solid !important;
  clear: both !important;
}

.contact-form .message textarea {
  height: 200px !important;
  padding: 23px !important;
}

.contact-form .name {
  float: left !important;
}

.contact-form .submit {
  background: #f4f5f6 !important;
  display: block !important;
  overflow: hidden !important;
  padding: 23px !important;
  margin-bottom: 2em;
}

.contact-form .submit .user-message {
  float: left !important;
  padding-top: 22px !important;
}

@media (max-width: 500px) {
  .contact-form .submit .user-message {
    float: none !important;
    padding: 0 0 10px !important;
  }
}

Step 3 (JavaScript Code):

Utilize JavaScript to add functionality to your popup contact form. Let me break it down for you:

1. validateEmail(email) function:

  • This function takes an email address as input.
  • It uses a regular expression (regex) to check if the email address is valid.
  • It returns true if the email is valid according to the regex, otherwise false.

2. closeForm() function:

  • This function clears the input fields in the contact form.
  • It removes a CSS class 'typing' from certain elements.
  • It hides a popup with class 'cd-popup'.
  • It shows a notification popup with a message saying "Thanks for contacting us!".

3. $(document).ready(function($):

  • This is a jQuery function that executes when the document (web page) is fully loaded and ready.
  • It binds various event handlers and actions to different elements.

4. $('#contact').on('click', function(event)):

  • This code handles the click event on an element with id 'contact'.
  • It sets up the contact form by adding a message and displaying it.

5. $('.cd-popup').on('click', function(event)):

  • This code handles the click event on elements with class 'cd-popup'.
  • It hides the popup if the click is outside the popup area.

6. $(document).keyup(function(event)):

  • This code listens for a keyup event on the document.
  • If the 'Esc' key (key code 27) is pressed, it hides the popup.

7. $('#name').keyup(function()), $('#email').keyup(function()), $('#message').keyup(function()):

  • These functions handle keyup events on input fields for name, email, and message.
  • They add a CSS class 'typing' to corresponding elements if there is any input in the field.

8. $('#contactform').submit(function()):

  • This function handles the form submission event.
  • It retrieves values from input fields for name, email, message, and a checkbox for human verification.
  • It performs validation checks:
  • Checks if the human verification checkbox is checked.
  • Check if the email is valid using the validateEmail() function.
  • Checks if name and message fields are not empty.
  • Depending on validation results, it either submits the form (calls closeForm()), or displays error messages in a notification popup.
function validateEmail(email) {
  var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return re.test(email);
}

function closeForm() {
  document.contactform.name.value = '';
  document.contactform.email.value = '';
  document.contactform.message.value = '';

  $('.email').removeClass('typing');
  $('.name').removeClass('typing');
  $('.message').removeClass('typing');

  $('.cd-popup').removeClass('is-visible');
  $('.notification').addClass('is-visible');
  $('#notification-text').html("Thanks for contacting us!");
}

$(document).ready(function($) {
  $('#contact').on('click', function(event) {
    event.preventDefault();

    $('#contactblurb').html('Questions, suggestions, and general comments are all welcome!');
    $('.contact').addClass('is-visible');

    if ($('#name').val().length != 0) {
      $('.name').addClass('typing');
    }
    if ($('#email').val().length != 0) {
      $('.email').addClass('typing');
    }
    if ($('#message').val().length != 0) {
      $('.message').addClass('typing');
    }
  });

  $('.cd-popup').on('click', function(event) {
    if ($(event.target).is('.cd-popup-close') || $(event.target).is('.cd-popup')) {
      event.preventDefault();
      $(this).removeClass('is-visible');
    }
  });

  $(document).keyup(function(event) {
    if (event.which == '27') {
      $('.cd-popup').removeClass('is-visible');
    }
  });

  $('#name').keyup(function() {
    $('.name').addClass('typing');
    if ($(this).val().length == 0) {
      $('.name').removeClass('typing');
    }
  });
  $('#email').keyup(function() {
    $('.email').addClass('typing');
    if ($(this).val().length == 0) {
      $('.email').removeClass('typing');
    }
  });
  $('#message').keyup(function() {
    $('.message').addClass('typing');
    if ($(this).val().length == 0) {
      $('.message').removeClass('typing');
    }
  });

  $('#contactform').submit(function() {
    var name = $('#name').val();
    var email = $('#email').val();
    var message = $('#message').val();
    var human = $('#human:checked').val();

    if (human) {
      if (validateEmail(email)) {
        if (name) {
          if (message) {
            closeForm();

          } else {
            $('#notification-text').html("<strong>Please let us know what you're thinking!</strong>");
            $('.notification').addClass('is-visible');
          }
        } else {
          $('#notification-text').html('<strong>Please provide a name.</strong>');
          $('.notification').addClass('is-visible');
        }
      } else {
        $('#notification-text').html('<strong>Please use a valid email address.</strong>');
        $('.notification').addClass('is-visible');
      }
    } else {
      $('#notification-text').html('<h3><strong><em>Warning: Please prove you are a human and not a robot.</em></strong></h3>');
      $('.notification').addClass('is-visible');
    }

    return false;
  });
});

Final Output:

Create a Responsive Popup Contact Form HTML, CSS, JavaScript Tutorial.gif
Read AlsoCreating a Stunning CSS Gravity Button Step-by-Step Tutorial Source Code.jpgCreating a Stunning CSS Gravity Button: Step-by-Step Tutorial (Source Code)

Conclusion:

By following this tutorial, you can create a responsive popup contact form using HTML, CSS, and JavaScript to enhance user interaction and engagement on your website. Implementing this feature can lead to improved communication with your audience and increased conversions.

Code by: Danny Holmes

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: responsive popup contact form, html, css, javascript, user interaction, user experience, web development, source code, how to create a responsive popup contact form, html css javascript contact form, popup contact form tutorial, enhancing user interaction with popup forms, creating engaging web forms, improving user experience with contact forms
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post

Please allow ads on our site🥺